<!doctype html>
<!--[if IE 7 ]>    <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-gb" class="no-js"> <!--<![endif]-->

	<?php 
$relaytype = intval($_REQUEST['relaytype']);
?>

<head>
	<title>OnionView</title>
	
	<meta charset="utf-8">
	<meta name="keywords" content="OnionView, Tor, Map, Router, The Onion Router, Relay, Server, Atlas, Vision, List, Hidden Services" />
	<meta name="description" content="OnionView, created by Luke Millanta, is an interactive map of Tor relay servers." /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- Google fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
       
    <!-- ######### CSS STYLES ######### -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
    
    <!-- responsive devices styles -->
	<link rel="stylesheet" media="screen" href="css/responsive-leyouts.css" type="text/css" />
    

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	 <script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    
	
    <script type="text/javascript">
    //<![CDATA[

	// configure options
    var map;
    var initLatLng = new google.maps.LatLng(25, -0);
    var initZoom = 2;
    var locations = new Array();
    var mapmarkers = new Array();
    var markerCluster = null;
    var totalCount = 0;
    var relaytype = 0;
    
    // markerClusterer options.
    // gridSize determines how close markers must be on-screen before
    //    they are turned into a cluster
    // maxZoom is the map zoom level beyond which clusters all
    //    turn into individual markers
    var mcOptions = {gridSize: 20, maxZoom: 15};
    
    function load() {
    	// set map options
        var myOptions = {
            zoom: initZoom,
            center: initLatLng,
            streetViewControl: false,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }
     	// create map, attached to div#map_canvas
        map = new google.maps.Map(document.getElementById("map"), myOptions);
 
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("ajaxloaddata.php?relaytype=<?php echo $relaytype?>" , function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        totalCount = markers.length;
        for (var i = 0; i < markers.length; i++) {
          var ipaddr = markers[i].getAttribute("ipaddr");
          var hostname = markers[i].getAttribute("hostname");
          var routername = markers[i].getAttribute("routername");
          var uptime = markers[i].getAttribute("uptime");
          var platform = markers[i].getAttribute("platform");
          var country = markers[i].getAttribute("country");
          var exitrelay = markers[i].getAttribute("exitrelay");
          
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "IP Addr: <b>" + ipaddr + "</b> <br/>Host Name: " + hostname + "<br/>Router Name: " + routername + "<br/>Up Time: " + uptime + "<br/>Platform: " + platform + "<br/>Country: " + country + "<br/>Exit Relay: " + exitrelay;

          mapmarkers[i]  = new google.maps.Marker({
            map: map,
            position: point,
            icon: 'https://maps.google.com/mapfiles/ms/micons/blue.png'
          });
          bindInfoWindow(mapmarkers[i], map, infoWindow, html);
        }
        show_markers();
        
      });
      
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    function show_markers () {
    	 
        // create temp array for cluster
        var temp_markers = new Array();
        // if the markerClusterer object doesn't exist, create it with empty temp_markers
        if (markerCluster == null) {
            markerCluster = new MarkerClusterer(map, temp_markers, mcOptions);
        }
        // clear all markers
        markerCluster.clearMarkers();
 		
        // iterate through all locations, setting only those in the selected category
        for (i = 0; i < totalCount; i++) {
           
                    // add marker to temp array, for clustering
                    temp_markers.push(mapmarkers[i]);
               
        } // for
        
        // add all current markers to cluster
        markerCluster.addMarkers(temp_markers);
        // re-center map, in case it has changed
        map.setCenter(initLatLng);
        // reset map zoom to initial value
        map.setZoom(initZoom);
                    
    } // function show_markers
    //]]>
	function changeRelayType() {
		relaytype = document.getElementById('relaytype').value;
		location.href= '?relaytype=' + relaytype; 
	}
  </script>
    
</head>

<body onload="load()">

<div class="site_wrapper">
	
    <div class="container_full">
    
    	<div class="top_links">
            <div class="container">
            	
			<div class="date_wrap">
			<script type="text/javascript">
            var mydate=new Date()
            var year=mydate.getYear()
            if (year < 1000)
            year+=1900
            var day=mydate.getDay()
            var month=mydate.getMonth()
            var daym=mydate.getDate()
            if (daym<10)
            daym="0"+daym
            var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
            document.write("<b class='date'>"+montharray[month]+" "+daym+", "+year+"</b>")
            </script>
            </div><!-- end date -->
            
            <div class="top_contact_info">
                    <ul class="tci_list">
					Copyright &copy; 2015 OnionView | All Rights Reserved | <a href="about.php">About OnionView</a>
                    </ul>
            </div><!-- end top contact info -->
                
            
            </div>
    	</div><!-- end top links -->
        
        
        <div class="top_section">

    	<div class="container">

    		<div id="logo"><a href="index.php" class="site_logo"><img src="images/logo.png" alt="" /></a></div><!-- end logo -->
            	
            <nav id="access" class="access" role="navigation">
            
                <div id="menu" class="menu">
                    
                    <ul id="tiny">
                        <li><a href="https://OnionView.com/?relaytype=0">All Relays</a></li>
                        <li><a href="https://OnionView.com/?relaytype=1">Exit Relays</a></li>	
						<li><a href="https://OnionView.com/?relaytype=2">Internal Relays</a>
						</li>
                    </ul>
                    
                </div>
                
            </nav>

		</div> 

	</div>
    

</div><!-- end top -->
<div id="map" style="width: 100%; height: 857px;"></div>

</body>
</html>